<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view>
	<ui:composition template="/templates/layout/layout.xhtml">
		<ui:define name="content">
			<h:outputStylesheet library="css" name="site.css" target="head" />
			<h2 class="heading">Foreign Exchange Application</h2>
			<div class="currency-converter">
				<div class="box">
					<div class="heading">Currency Converter</div>
					<h:form id="exchangeRateForm">
						<h:outputScript name="currency-converter.js" library="js"
							target="head" />
						<div>
							<div class="label">
								<h:outputText id="currencyCodeLabel" value="From:" />
							</div>
							<div class="data">
								<h:selectOneMenu id="fromCurrency"
									value="#{currencyConverterBean.fromCurrency}">
									<f:selectItems value="#{currencyConverterBean.currencyRates}"
										var="c" itemValue="#{c.symbol}" itemLabel="#{c.symbol}" />
								</h:selectOneMenu>
							</div>
							<div style="clear: both"></div>
						</div>
						<div>
							<div class="label">
								<h:outputText id="lblTo" value="To:" />
							</div>
							<div class="data">
								<h:selectOneMenu id="toCurrency"
									value="#{currencyConverterBean.toCurrency}">
									<f:selectItems value="#{currencyConverterBean.currencyRates}"
										var="c" itemValue="#{c.symbol}" itemLabel="#{c.symbol}" />
								</h:selectOneMenu>
							</div>
							<div style="clear: both"></div>
						</div>
						<div>
							<div class="label">
								<h:outputText id="lblAmount" value="Amount:" />
							</div>
							<div class="data">
								<h:inputText id="amount" value="#{currencyConverterBean.amount}"
									title="Enter the amount ..." required="true"
									validatorMessage="Invalid amount, Try Again." size="8">
									<f:validateLength minimum="1" maximum="6" />
								</h:inputText>
								<h:message id="errAmount" for="amount" />
								<div id="spin" />
							</div>
							<div style="clear: both"></div>
						</div>
						<div>
							<div class="label"></div>
							<div class="data">
								<h:commandButton id="btnExchangeRate" value="Calculate"
									action="#{currencyConverterBean.exchangeRate}">
									<f:ajax execute="fromCurrency toCurrency amount"
										render="conversionAmount" onevent="msg" />
								</h:commandButton>
								<div id="spin" />
							</div>
							<div style="clear: both"></div>
						</div>
						<div class="result">
							<h:outputText id="exchangeRateLabel" value="Conversion Amount: " />
							<h:outputText id="conversionAmount"
								value="#{currencyConverterBean.conversionAmount}"></h:outputText>
						</div>
					</h:form>
				</div>
			</div>
			<div class="box-separator" />
			<div class="box">
				<div class="heading">Currency Exchange Rates</div>
				<h:dataTable value="#{currencyConverterBean.currencyRates}" var="c"
					styleClass="table" headerClass="table-header"
					rowClasses="table-odd-row,table-even-row">
					<h:column styleClass="table-cell">
						<f:facet name="header">Symbol</f:facet>
    				#{c.symbol}
    			</h:column>
					<h:column styleClass="table-cell">
						<f:facet name="header">Rate (in rupees)</f:facet>
    				#{c.rate}
    			</h:column>
				</h:dataTable>
				<div style="clear: both"></div>
			</div>
			<div style="clear: both"></div>
		</ui:define>
	</ui:composition>
</f:view>
</html>